<script lang="ts" setup>
import { ref } from 'vue'
import BaseButton from '@/components/ui/BaseButton.vue'
import { safeAreaInsets } from '@/utils/systemInfo'

defineOptions({
  name: 'Discover',
})
definePage({

  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '发现',
  },
})

// 当前激活的标签页
const activeTab = ref('社区分享')

// 标签页列表
const tabs = ref([
  '社区分享',
  '热门话题',
  '推荐用户',
  '热门标签',
])

// 热门标签
const hotTags = ref([
  { id: 1, name: '# 现代言情', active: true },
  { id: 2, name: '# 都市爽文', active: false },
  { id: 3, name: '# 玄幻修仙', active: false },
  { id: 4, name: '# 重生逆袭', active: false },
  { id: 5, name: '# 末世囤货', active: false },
  { id: 6, name: '# 穿越古言', active: false },
  { id: 7, name: '# 校园青春', active: false },
  { id: 8, name: '# 职场励志', active: false },
])

// 用户分享数据
const userShares = ref([
  {
    id: 1,
    user: {
      id: 1,
      name: '小说爱好者小王',
      avatar: 'https://picsum.photos/seed/user1/40/40.jpg',
      verified: true,
      verifiedType: '认证用户',
      postTime: '2小时前',
    },
    content: '刚刚看完这本《霸道总裁的契约新娘》，剧情太精彩了！男主超帅，女主不圣母，推荐给大家～番茄小说可以搜到，链接已经分享到书库了！',
    novel: {
      id: 1,
      title: '霸道总裁的契约新娘',
      author: '糖糖很甜',
      cover: 'https://picsum.photos/seed/share1/80/120.jpg',
      description: '一场意外，她成了他的契约新娘。原以为只是一场交易，却不料陷入了他的温柔陷阱...',
      viewCount: 23.5,
      likeCount: 12.3,
    },
    stats: {
      liked: true,
      likeCount: 256,
      commentCount: 42,
      bookmarkCount: 88,
    },
    isFollowing: false,
  },
  {
    id: 2,
    user: {
      id: 2,
      name: '追书少女',
      avatar: 'https://picsum.photos/seed/user2/40/40.jpg',
      verified: true,
      verifiedType: '认证用户',
      postTime: '5小时前',
    },
    content: '发现一本超好看的末世重生文！女主智商在线，囤货达人，男主也很给力。不喜欢圣母女主的姐妹们可以冲！',
    novel: {
      id: 2,
      title: '末世重生：我囤积了亿万物资',
      author: '囤货小能手',
      cover: 'https://picsum.photos/seed/share2/80/120.jpg',
      description: '重生回到末世前一个月，这次我准备了亿万物资，势要在末世中活出精彩...',
      viewCount: 18.9,
      likeCount: 9.8,
    },
    stats: {
      liked: false,
      likeCount: 189,
      commentCount: 35,
      bookmarkCount: 67,
    },
    isFollowing: false,
  },
  {
    id: 3,
    user: {
      id: 3,
      name: '玄幻书虫',
      avatar: 'https://picsum.photos/seed/user3/40/40.jpg',
      verified: true,
      verifiedType: '活跃用户',
      verifiedColor: 'blue',
      postTime: '1天前',
    },
    content: '这本仙侠文太上头了！修炼体系很新颖，打斗场面描写得很精彩，主角杀伐果断不圣母。推荐给喜欢爽文的朋友！',
    novel: {
      id: 3,
      title: '太古第一仙',
      author: '剑来',
      cover: 'https://picsum.photos/seed/share3/80/120.jpg',
      description: '少年叶凡意外获得太古传承，从此踏上修仙之路，战天斗地，成就无上仙道...',
      viewCount: 31.2,
      likeCount: 15.6,
    },
    stats: {
      liked: false,
      likeCount: 342,
      commentCount: 58,
      bookmarkCount: 125,
    },
    isFollowing: false,
  },
])

// 热门话题数据
const hotTopics = ref([
  {
    id: 1,
    badge: '热门',
    badgeColor: 'primary',
    discussCount: '1.2k',
    title: '最近有什么好看的现言推荐？',
    description: '求推荐一些不圣母、女主智商在线的现代言情小说...',
    author: '言情爱好者',
    commentCount: 89,
    trend: 'hot',
  },
  {
    id: 2,
    badge: '精华',
    badgeColor: 'warning',
    discussCount: '856',
    title: '盘点那些年追过的经典小说',
    description: '来聊聊那些让你熬夜追更、记忆深刻的小说...',
    author: '老书虫',
    commentCount: 234,
    trend: 'star',
  },
  {
    id: 3,
    badge: '最新',
    badgeColor: 'info',
    discussCount: '445',
    title: '末世文推荐，女主强大型',
    description: '最近迷上末世文，求推荐一些女主强大、不圣母的作品...',
    author: '末世爱好者',
    commentCount: 67,
    trend: 'clock',
  },
])

// 推荐用户数据
const recommendUsers = ref([
  {
    id: 1,
    name: '小说推荐官',
    avatar: 'https://picsum.photos/seed/recuser1/80/80.jpg',
    description: '专注分享优质小说',
    stats: {
      following: 1200,
      followers: 3500,
      shares: 89,
    },
    isFollowing: false,
  },
  {
    id: 2,
    name: '追书达人',
    avatar: 'https://picsum.photos/seed/recuser2/80/80.jpg',
    description: '每日更新小说推荐',
    stats: {
      following: 856,
      followers: 2100,
      shares: 156,
    },
    isFollowing: false,
  },
  {
    id: 3,
    name: '玄幻迷妹',
    avatar: 'https://picsum.photos/seed/recuser3/80/80.jpg',
    description: '玄幻小说专业户',
    stats: {
      following: 2300,
      followers: 5800,
      shares: 234,
    },
    isFollowing: false,
  },
  {
    id: 4,
    name: '言情小姐姐',
    avatar: 'https://picsum.photos/seed/recuser4/80/80.jpg',
    description: '甜宠文爱好者',
    stats: {
      following: 1800,
      followers: 4200,
      shares: 178,
    },
    isFollowing: false,
  },
])

// 所有标签数据
const allTags = ref([
  '# 现代言情',
  '# 都市爽文',
  '# 玄幻修仙',
  '# 重生逆袭',
  '# 末世囤货',
  '# 穿越古言',
  '# 校园青春',
  '# 职场励志',
  '# 甜宠文',
  '# 快穿文',
  '# 种田文',
  '# 爽文',
  '# 萌宝文',
  '# 娱乐圈',
  '# 军婚',
  '# 民国',
  '# 仙侠',
  '# 历史',
  '# 科幻',
  '# 游戏',
  '# 悬疑推理',
  '# 灵异',
  '# 二次元',
  '# 体育竞技',
  '# 青春校园',
])

// 切换标签页
function switchTab(tab: string) {
  activeTab.value = tab
}

// 处理标签点击
function handleTagClick(tagId: number) {
  hotTags.value.forEach((tag) => {
    tag.active = tag.id === tagId
  })
  uni.showToast({
    title: `选中标签: ${hotTags.value.find(t => t.id === tagId)?.name}`,
    icon: 'none',
  })
}

// 处理分享点赞
function handleShareLike(shareId: number) {
  const share = userShares.value.find(s => s.id === shareId)
  if (share) {
    share.stats.liked = !share.stats.liked
    share.stats.likeCount += share.stats.liked ? 1 : -1
  }
}

// 处理分享评论
function handleShareComment(shareId: number) {
  uni.showToast({
    title: '评论功能开发中',
    icon: 'none',
  })
}

// 处理分享收藏
function handleShareBookmark(shareId: number) {
  uni.showToast({
    title: '收藏功能开发中',
    icon: 'none',
  })
}

// 处理分享转发
function handleShareShare(shareId: number) {
  uni.showToast({
    title: '分享功能开发中',
    icon: 'none',
  })
}

// 处理关注用户
function handleFollowUser(userId: number) {
  const share = userShares.value.find(s => s.user.id === userId)
  if (share) {
    share.isFollowing = !share.isFollowing
    uni.showToast({
      title: share.isFollowing ? '已关注' : '已取消关注',
      icon: 'success',
    })
  }
}

// 处理推荐用户关注
function handleFollowRecommendUser(userId: number) {
  const user = recommendUsers.value.find(u => u.id === userId)
  if (user) {
    user.isFollowing = !user.isFollowing
    uni.showToast({
      title: user.isFollowing ? '已关注' : '已取消关注',
      icon: 'success',
    })
  }
}

// 处理话题点击
function handleTopicClick(topic: any) {
  uni.showToast({
    title: `话题: ${topic.title}`,
    icon: 'none',
  })
}

// 处理小说点击
function handleNovelClick(novelId: number) {
  uni.navigateTo({
    url: `/pages/novel-detail/index?id=${novelId}`,
  })
}

// 处理筛选
function handleFilter() {
  uni.showToast({
    title: '筛选功能开发中',
    icon: 'none',
  })
}

// 处理通知
function handleNotification() {
  uni.showToast({
    title: '通知功能开发中',
    icon: 'none',
  })
}

// 格式化数量显示
function formatCount(count: number) {
  if (count >= 10000) {
    return `${(count / 10000).toFixed(1)}万`
  }
  if (count >= 1000) {
    return `${(count / 1000).toFixed(1)}k`
  }
  return count.toString()
}

// 格式化粉丝数
function formatFollowers(count: number) {
  if (count >= 1000) {
    return `${(count / 1000).toFixed(1)}k`
  }
  return count.toString()
}
</script>

<template>
  <view class="discover-page bg-bg-dark" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
    <!-- 顶部标题栏 -->
    <view class="discover-header">
      <view class="header-left">
        <i class="fas fa-compass text-36rpx text-primary" />
        <text class="header-title">发现</text>
      </view>
      <view class="header-right">
        <i class="fas fa-filter text-32rpx text-text-muted" @click="handleFilter" />
        <i class="fas fa-bell text-32rpx text-text-muted" @click="handleNotification" />
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="page-content-diy">
      <!-- 标签页导航 -->
      <view class="tabs">
        <view
          v-for="tab in tabs"
          :key="tab"
          class="tab-item" :class="[{ active: activeTab === tab }]"
          @click="switchTab(tab)"
        >
          <text>{{ tab }}</text>
        </view>
      </view>

      <!-- 社区分享内容 -->
      <view v-if="activeTab === '社区分享'" class="tab-content">
        <!-- 热门标签 -->
        <view class="hot-tags-section">
          <text class="section-title">热门标签</text>
          <view class="tag-cloud">
            <view
              v-for="tag in hotTags"
              :key="tag.id"
              class="tag" :class="[{ active: tag.active }]"
              @click="handleTagClick(tag.id)"
            >
              <text>{{ tag.name }}</text>
            </view>
          </view>
        </view>

        <!-- 用户分享列表 -->
        <view class="shares-list">
          <view
            v-for="share in userShares"
            :key="share.id"
            class="share-card"
          >
            <!-- 分享头部 -->
            <view class="share-header">
              <image :src="share.user.avatar" class="user-avatar" mode="aspectFill" />
              <view class="user-info">
                <view class="user-name-row">
                  <text class="user-name">{{ share.user.name }}</text>
                  <view v-if="share.user.verified" class="verified-badge" :class="[share.user.verifiedColor]">
                    <i :class="share.user.verifiedType === '认证用户' ? 'fas fa-check-circle' : 'fas fa-medal'" />
                    <text>{{ share.user.verifiedType }}</text>
                  </view>
                </view>
                <text class="post-time">{{ share.user.postTime }}</text>
              </view>
              <BaseButton
                :variant="share.isFollowing ? 'secondary' : 'ghost'"
                size="small"
                @click="handleFollowUser(share.user.id)"
              >
                <i :class="share.isFollowing ? 'fas fa-check' : 'fas fa-plus'" />
                <text>{{ share.isFollowing ? '已关注' : '关注' }}</text>
              </BaseButton>
            </view>

            <!-- 分享内容 -->
            <view class="share-content">
              <text class="share-text">{{ share.content }}</text>
              <view class="novel-card" @click="handleNovelClick(share.novel.id)">
                <image :src="share.novel.cover" class="novel-cover" mode="aspectFill" />
                <view class="novel-info">
                  <view class="novel-main-info">
                    <text class="novel-title">{{ share.novel.title }}</text>
                    <text class="novel-author">作者：{{ share.novel.author }}</text>
                    <text class="novel-description">{{ share.novel.description }}</text>
                  </view>
                  <view class="novel-meta">
                    <view class="meta-item">
                      <i class="fas fa-eye" />
                      <text>{{ formatCount(share.novel.viewCount) }}</text>
                    </view>
                    <view class="meta-item">
                      <i class="fas fa-heart" />
                      <text>{{ formatCount(share.novel.likeCount) }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <!-- 分享操作 -->
            <view class="share-actions">
              <view
                class="action-item" :class="[{ liked: share.stats.liked }]"
                @click="handleShareLike(share.id)"
              >
                <i class="fas fa-heart" />
                <text>{{ share.stats.likeCount }}</text>
              </view>
              <view class="action-item" @click="handleShareComment(share.id)">
                <i class="fas fa-comment" />
                <text>{{ share.stats.commentCount }}</text>
              </view>
              <view class="action-item" @click="handleShareBookmark(share.id)">
                <i class="fas fa-bookmark" />
                <text>{{ share.stats.bookmarkCount }}</text>
              </view>
              <view class="action-item" @click="handleShareShare(share.id)">
                <i class="fas fa-share" />
                <text>分享</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 热门话题内容 -->
      <view v-if="activeTab === '热门话题'" class="tab-content">
        <view class="topics-list">
          <view
            v-for="topic in hotTopics"
            :key="topic.id"
            class="topic-card"
            @click="handleTopicClick(topic)"
          >
            <view class="topic-header">
              <view class="topic-badge" :class="[topic.badgeColor]">
                <text>{{ topic.badge }}</text>
              </view>
              <text class="discuss-count">讨论量 {{ topic.discussCount }}</text>
            </view>
            <text class="topic-title">{{ topic.title }}</text>
            <text class="topic-description">{{ topic.description }}</text>
            <view class="topic-meta">
              <view class="meta-item">
                <i class="fas fa-user" />
                <text>{{ topic.author }}</text>
              </view>
              <view class="meta-item">
                <i class="fas fa-comment" />
                <text>{{ topic.commentCount }}回复</text>
              </view>
              <view class="meta-item">
                <i :class="topic.trend === 'hot' ? 'fas fa-fire' : topic.trend === 'star' ? 'fas fa-star' : 'fas fa-clock'" />
                <text>{{ topic.trend === 'hot' ? '热门' : topic.trend === 'star' ? '精华' : '最新' }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 推荐用户内容 -->
      <view v-if="activeTab === '推荐用户'" class="tab-content">
        <view class="users-grid">
          <view
            v-for="user in recommendUsers"
            :key="user.id"
            class="user-card"
          >
            <image :src="user.avatar" class="user-avatar-large" mode="aspectFill" />
            <text class="user-name">{{ user.name }}</text>
            <text class="user-description">{{ user.description }}</text>
            <BaseButton
              :variant="user.isFollowing ? 'secondary' : 'primary'"
              size="small"
              class="w-full"
              @click="handleFollowRecommendUser(user.id)"
            >
              <text>{{ user.isFollowing ? '已关注' : '关注' }}</text>
            </BaseButton>
            <view class="user-stats">
              <view class="user-stat">
                <text class="user-stat-value">{{ formatFollowers(user.stats.following) }}</text>
                <text class="user-stat-label">关注</text>
              </view>
              <view class="user-stat">
                <text class="user-stat-value">{{ formatFollowers(user.stats.followers) }}</text>
                <text class="user-stat-label">粉丝</text>
              </view>
              <view class="user-stat">
                <text class="user-stat-value">{{ user.stats.shares }}</text>
                <text class="user-stat-label">分享</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 热门标签内容 -->
      <view v-if="activeTab === '热门标签'" class="tab-content">
        <view class="tag-cloud-large">
          <view
            v-for="(tag, index) in allTags"
            :key="index"
            class="tag" :class="[{ active: index === 0 }]"
            @click="console.log('选中标签:', tag)"
          >
            <text>{{ tag }}</text>
          </view>
        </view>
        <view class="empty-state">
          <i class="fas fa-tags empty-icon" />
          <text class="empty-text">点击标签查看相关内容</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.discover-page {
  /* min-height: 100vh;
  padding-bottom: 120rpx; */
}

// 顶部标题栏样式
.discover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background-color: var(--background-medium);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.header-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.page-content-diy {
  padding: 0 var(--spacing-md);
}

// 标签页样式
.tabs {
  display: flex;

  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border-bottom: 2rpx solid var(--border-color);
  padding-bottom: var(--spacing-sm);
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-sm) 0;
  color: var(--text-muted);
  font-size: 28rpx;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
  position: relative;
}

.tab-item.active {
  color: var(--primary-color);
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: calc(-1 * var(--spacing-sm));
  left: 0;
  right: 0;
  height: 4rpx;
  background-color: var(--primary-color);
}

// 用户分享卡片样式
.hot-tags-section {
  margin-bottom: var(--spacing-lg);
}

.section-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  display: block;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.tag {
  background-color: var(--background-light);
  color: var(--text-secondary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 40rpx;
  font-size: 26rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tag:hover,
.tag.active {
  background-color: var(--primary-color);
  color: var(--text-primary);
}

.shares-list {
}

.share-card {
  background-color: var(--background-medium);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  box-shadow: 0 8rpx 24rpx var(--shadow-color);
}

.share-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.user-info {
  flex: 1;
}

.user-name-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: 4rpx;
}

.user-name {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.verified-badge {
  display: flex;
  align-items: center;
  gap: 4rpx;
  padding: 2rpx 8rpx;
  border-radius: 8rpx;
  font-size: 20rpx;
}

.verified-badge.primary {
  background-color: rgba(255, 107, 53, 0.2);
  color: var(--primary-color);
}

.verified-badge.blue {
  background-color: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.post-time {
  font-size: 24rpx;
  color: var(--text-muted);
}

.share-content {
  margin-bottom: var(--spacing-md);
}

.share-text {
  font-size: 28rpx;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
  display: block;
}

.novel-card {
  display: flex;
  gap: var(--spacing-md);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.novel-card:hover {
  transform: translateY(-2rpx);
}

.novel-cover {
  width: 160rpx;
  height: 240rpx;
  border-radius: var(--spacing-xs);
  object-fit: cover;
}

.novel-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.novel-main-info {
}

.novel-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.novel-author {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.novel-description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.novel-meta {
  display: flex;
  gap: var(--spacing-md);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: var(--text-muted);
  font-size: 24rpx;
}

.meta-item i {
  font-size: 24rpx;
}

.share-actions {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  padding-top: var(--spacing-md);
  border-top: 2rpx solid var(--border-color);
}

.action-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-muted);
  font-size: 28rpx;
  cursor: pointer;
  transition: color 0.3s ease;
}

.action-item:hover {
  color: var(--primary-color);
}

.action-item.liked {
  color: #ef4444;
}

// 热门话题样式
.topics-list {
}

.topic-card {
  background-color: var(--background-medium);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  cursor: pointer;
  transition: all 0.3s ease;
}

.topic-card:hover {
  transform: translateY(-4rpx);
  box-shadow: 0 16rpx 48rpx var(--shadow-color);
}

.topic-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.topic-badge {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 24rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.topic-badge.primary {
  background-color: var(--primary-color);
  color: var(--text-primary);
}

.topic-badge.warning {
  background-color: #f59e0b;
  color: var(--text-primary);
}

.topic-badge.info {
  background-color: #3b82f6;
  color: var(--text-primary);
}

.discuss-count {
  font-size: 24rpx;
  color: var(--text-muted);
}

.topic-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.topic-description {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
  display: block;
}

.topic-meta {
  display: flex;
  gap: var(--spacing-md);
  font-size: 24rpx;
  color: var(--text-muted);
}

// 推荐用户样式
.users-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.user-card {
  background-color: var(--background-medium);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  text-align: center;
  transition: transform 0.3s ease;
}

.user-card:hover {
  transform: translateY(-4rpx);
}

.user-avatar-large {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  margin: 0 auto var(--spacing-md);
}

.user-card .user-name {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.user-description {
  font-size: 24rpx;
  color: var(--text-muted);
  margin-bottom: var(--spacing-md);
  display: block;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 2rpx solid var(--border-color);
}

.user-stat {
  text-align: center;
}

.user-stat-value {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}

.user-stat-label {
  font-size: 24rpx;
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
  display: block;
}

// 热门标签页面样式
.tag-cloud-large {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64rpx 0;
}

.empty-icon {
  font-size: 120rpx;
  color: var(--text-muted);
  margin-bottom: var(--spacing-md);
  display: block;
}

.empty-text {
  color: var(--text-muted);
  font-size: 28rpx;
  display: block;
}

.bottom-spacing {
  height: 120rpx;
}
</style>
